<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2023/5/10
  Time: 11:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <%--引入elementui css样式--%>
    <link rel="stylesheet" href="/css/index.css">
    <%--引入elementui js组件 js的引入必须放在vue引入的下方--%>
    <script type="text/javascript" src="/js/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <%--
     el-table:elementui中表格的标签
       :data: 绑定vue中表格的数据--%>
        <el-form :inline="true" :model="empSearchForm" class="demo-form-inline">
            <el-form-item label="员工名称">
                <el-input v-model="empSearchForm.name" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="员工出生日期">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择出生日期" v-model="empSearchForm.birthday"></el-date-picker>
            </el-form-item>
            <el-form-item label="所在部门">
                <el-select v-model="empSearchForm.deptId" placeholder="所在部门">
                    <el-option v-for="dept in depts" :label="dept.name" :value="dept.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchEmp">查询</el-button>
                <el-button type="primary" @click="resetSearchForm">重 置</el-button>
                <el-button type="success" @click="addEmp">添加</el-button>
            </el-form-item>
        </el-form>

    <%--添加对话框的开始
          :visible.sync:控制对话框的显示和隐藏
    --%>
    <el-dialog
            title="添加员工"
            :visible.sync="dialogVisible"
            width="30%"
            @close="addClose"
        >
        <%--el-form:表示表单标签
               :model表示表单对象 它和vue中的data要绑定再一起。
        --%>
        <el-form  :model="addEmpForm" :rules="empFormRule" label-width="80px" ref="empFormRule">
            <el-form-item label="员工头像">
                <el-upload
                        class="avatar-uploader"
                        action="/emp/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="员工名称" prop="name">
                <el-input v-model="addEmpForm.name"></el-input>
            </el-form-item>
            <el-form-item label="员工薪水" prop="salary">
                <el-input v-model.number="addEmpForm.salary"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择出生日期" v-model="addEmpForm.birthday" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="所在部门" prop="deptId">
                <el-select v-model="addEmpForm.deptId" placeholder="请选择所在部门" style="width: 100%">
                    <el-option v-for="dept in depts" :label="dept.name" :value="dept.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmAddEmp">确 定</el-button>
        </span>
    </el-dialog>
    <%--对话框的结束--%>

        <%--编辑对话框的开始
             :visible.sync:控制对话框的显示和隐藏
       --%>
        <el-dialog
                title="修改员工"
                :visible.sync="editDialogVisible"
                width="30%"
        >
            <%--el-form:表示表单标签
                   :model表示表单对象 它和vue中的data要绑定再一起。
            --%>
            <el-form ref="form" :model="editEmpForm" label-width="80px">
                <el-form-item label="员工名称">
                    <el-input v-model="editEmpForm.name"></el-input>
                </el-form-item>
                <el-form-item label="员工薪水">
                    <el-input v-model="editEmpForm.salary"></el-input>
                </el-form-item>
                <el-form-item label="出生日期">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择出生日期" v-model="editEmpForm.birthday" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="所在部门">
                    <el-select v-model="editEmpForm.deptId" placeholder="请选择所在部门" style="width: 100%">
                        <el-option v-for="dept in depts" :label="dept.name" :value="dept.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>

            <el-button type="primary" @click="confirmUpdateEmp">确 定</el-button>
        </span>
        </el-dialog>
        <%--编辑对话框的结束--%>
    <el-table
            :data="emps"
            border
            style="width: 100%">
        <%--
           el-table-column:表格的列
              prop: 显示的数据属性名
              lable:表头名称
              width: 宽度 如果没有标记该属性 默认平均分配剩余宽度
        --%>
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>
            <el-table-column
                    prop="headImg"
                    label="头像"
                    width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.headImg" width="100"/>
                </template>
            </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="salary"
                label="薪水">
        </el-table-column>
        <el-table-column
                prop="birthday"
                label="出生日期">
        </el-table-column>
        <el-table-column
                prop="dept.name"
                label="部门名称">
        </el-table-column>
        <el-table-column
                label="操作"
                width="220">
            <template slot-scope="scope">
                <%--el-button:按钮
                        type:按钮的类型
                        icon:按钮上的图标
                        size:按钮的大小
                 --%>
                <el-button type="primary" icon="el-icon-setting" size="small" @click="editEmp(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteEmp(scope.row.id)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--分页组件
       size-change:大小改变。每页显示的条数
       current-change:当前页面发生改变时触发的事件
       current-page: 当前页面
       page-sizes:
       page-size:默认显示的条数
       total: 总条数
    --%>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[2, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //搜索表单对象
            empSearchForm:{},
            //当前每页显示的条数
            pageSize:2,
            //当前页码
            currentPage4:1,
            //总条数
            total:0,
            //所有员工信息
            emps: [],
            //控制添加对话框的显示和隐藏
            dialogVisible: false,
            //控制编辑对话框的显示和隐藏
            editDialogVisible:false,
            //添加员工的表单对象
            addEmpForm:{},
            //修改员工的表单对象
            editEmpForm:{},
            //所有部门信息
            depts:[],
            //头像地址
            imageUrl:"",
            //表单校验规则
            empFormRule:{
                name: [
                    { required: true, message: '请输入员工姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                salary:[
                    { required: true, message: '请输入员工薪水', trigger: 'blur' },
                    { type: 'number', message: '薪水必须为数字值',trigger: 'blur'}
                ]
            }
        },
        //当页面加载创建完毕后执行，无需任何事件来触发
        created() {
            this.getAll();
            this.getAllDept();
        },
        methods: {
            //addClose关闭添加对话框时触发的事件
            addClose(){
                 console.log(this)
                //每一个表单项必须都使用prop属性
                 this.$refs.empFormRule.resetFields()
            },
            //搜索方法
            searchEmp(){
               this.currentPage4=1;
               this.getAll()
            },
            //文件上传成功后触发的事件
            handleAvatarSuccess(res, file) {
                this.imageUrl=res.data;
                this.addEmpForm.headImg=this.imageUrl;
            },
            //上传之前的事件
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            resetSearchForm(){
                this.empSearchForm={}
                this.getAll();
            },
            //每页显示的条数触发时的事件
            handleSizeChange(val) {
                this.pageSize=val;
                this.getAll();
            },
            //当前页码发生改变时触发的事件
            handleCurrentChange(val) {
                this.currentPage4=val;
                this.getAll();
            },
            //确认修改员工信息
            confirmUpdateEmp(){
               var that=this;
               axios.post("/emp/update",this.editEmpForm).then(function(result){
                   if(result.data.code==200){
                       that.$message.success(result.data.msg);
                       //关闭对话框
                       that.editDialogVisible=false;
                       //重新加载表格数据
                       that.getAll();
                   }else{
                       that.$message.error(result.data.msg);
                   }
               })
            },
            //编辑按钮事件
            editEmp(row){
                 this.editDialogVisible=true;
                 //当前行赋值给修改表单对象
                 this.editEmpForm=row;
            },
            //确认添加员工事件
            confirmAddEmp(){
                console.log(this)
                 this.$refs.empFormRule.validate((valid)=>{
                     if(valid){
                         var that=this;
                         axios.post("/emp/insert",this.addEmpForm).then(function(result){
                             if(result.data.code==200){
                                 that.$message.success(result.data.msg);
                                 //关闭对话框
                                 that.dialogVisible=false;
                                 //重新加载表格数据
                                 that.getAll();
                             }else{
                                 that.$message.error(result.data.msg);
                             }
                         })
                     }
                 })

            },
            //添加按钮事件
            addEmp(){
                this.dialogVisible=true;
            },

            //删除事件
            deleteEmp(id) {
                //提示框
                this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    //通过axios调用我们的删除接口。
                    var that = this;
                    axios.get("/emp/delete?id=" + id).then(function (result) {
                        if (result.data.code == 200) {
                            //1.弹出一个消息
                            that.$message.success(result.data.msg);
                            //2.重新加载表格数据
                            that.getAll();
                        } else {
                            //1.弹出一个消息
                            that.$message.error(result.data.msg);
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //查询所有部门信息
            getAllDept(){
                var that=this;
                axios.get("/dept/list").then(function(result){
                     that.depts=result.data.data; //把后台响应的所有员工信息赋值给vue变量
                })
            },

            getAll() {
                var that = this;
                //如果你传递json对象 那么你必须使用post提交
                axios.post("/emp/listPageByCondition?currentPage="+this.currentPage4+"&pageSize="+this.pageSize,this.empSearchForm).then(function (result) {
                    if (result.data.code == 200) {
                        that.total=result.data.data.total;
                        that.emps = result.data.data.list; //result.data获取统一的json对象--   result.data.data:获取json对象中属性data值
                    } else {
                        alert(result.data.msg);
                    }
                })
            }
        }

    })
</script>
</html>
<%--v:view  o:object--%>